<template>
  <div class="container">
    <el-upload :class="{ hide: hideUpload }" :on-change="changes" :limit="limit" :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleListSuccess" :file-list="fileList" :data="data">
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      uploadUrl: `${process.env.VUE_APP_BASE_API}/cloudApi/datacenter/file/uploadFile`,
      data: {
        useDay: 1,
        path: 'middleground/storeclass',
        projectId: 4
      },
      fileList: [],
      pathList: [],
      allUrlString: '',
      hideUpload: false,
      imgIp: this.proce
    }
  },
  watch: {
    url: {
      handler(val) {
        if (!val) return
        const obj = {
          name: '图片',
          url: `${process.env.VUE_APP_FILE_URL}/` + val
        }
        this.fileList = [obj]
      },
      immediate: true
    }
    // url(val) {
    //   if (!val) return
    //   const obj = {
    //     name: '图片',
    //     url: 'https://yswl-cloud-service.obs.cn-north-4.myhuaweicloud.com/' + val
    //   }
    //   this.fileList = [obj]
    // }
    // imgurl(val) {
    // }
  },
  // mounted() {
  //   this.fileList = []
  //   if (!this.imgurl) return
  //   const obj = {
  //     name: '图片',
  //     url: 'https://yswl-cloud-service.obs.cn-north-4.myhuaweicloud.com/' + this.imgurl
  //   }
  //   this.fileList.push(obj)
  // },
  methods: {
    // 清空图片数组
    handleRemoveempty() {
      this.fileList = []
      this.hideUpload = this.fileList.length >= this.limit
    },
    handleRemove(file, fileList) {
      // 重置预览数据
      this.fileList = fileList
      // 删除路径数组内对应的元素
      for (const index in this.pathList) {
        if (`${process.env.VUE_APP_FILE_URL}/${this.pathList[index]}` === file.url) {
          this.pathList.splice(index, 1)
        }
      }
      // 重置路径合集字符串
      this.allUrlString = this.pathList.join(',')
      const data = {
        fileLsit: this.fileList,
        pathList: this.pathList,
        allUrlString: this.allUrlString
      }
      this.$emit('onremoveimgs', this.allUrlString)
      // 这个是判断上传一张之后是否还继续显示后面的加号继续上传之后的文件，如果是一张就隐藏，如果是多张则显示
      this.hideUpload = fileList.length >= this.limit
      //  this.$emit('upload_over', data)
      //  this.$emit('onremove', data)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleListSuccess(res, file) {
      this.allUrlString = ''
      this.pathList = []
      this.fileList = []
      if (res.code === 200) {
        const obj = {
          name: '图片',
          url: res.data.ip + '/' + res.data.fileUrl
        }
        // 添加入预览数组
        this.fileList.push(obj)
        // 添加入路径数组
        this.pathList.push(res.data.fileUrl)
        // 路径合集字符串用逗号隔开
        this.allUrlString = this.pathList.join(',')
        const data = {
          fileLsit: this.fileList,
          pathList: this.pathList,
          allUrlString: this.allUrlString
        }
        this.$emit('upload_over', data)
        this.$emit('onsuccess', this.allUrlString)
      } else {
        this.$message.error('上传图片失败')
      }
    },
    // 在change事件里判断是否显示后面继续上传图片的加号，如果只是一张则隐藏，如果有就显示出来
    changes(file, fileList) {
      this.hideUpload = fileList.length >= this.limit //this.limit就是图片数量
    }
  }
}
</script>
<style lang="scss" scoped>
.hide ::v-deep .el-upload--picture-card {
  display: none;
}
</style>
